import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';

import {
  Button,
  DatePicker,
  Form,
  Input,
  Modal,
  Radio,
  Tag,
  Select,
  InputNumber,
  message,
  Row,
  Col,
  Tree,
} from 'antd';
import { modalLayoutLg, modalLayoutSm } from '@/config/layout';
import { handleTreeList } from '@/utils'
import { request } from 'umi';
import { DownOutlined } from '@ant-design/icons';
const DictModal = (props: any, refs: any) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [menusTree, setmenusTree] = useState(null);
  const [selectKey, setselectKey] = useState([]);
  const [nodeinfo, setnodeinfo] = useState(null)
  //显示弹窗
  const showModal = () => {
    setIsModalVisible(true);
  };

  //取消
  const handleCancel = () => {
    setIsModalVisible(false);
    setselectKey([]);
    setnodeinfo(null);
    // props.callback && props.callback();
  };
  //确定
  const handleOk = () => {
    if (nodeinfo) {
      props.callback && props.callback(nodeinfo);
      handleCancel();
    } else {
      message.error('必须选择一个')
    }
  };
  const getMenus = async () => {
    const response: any = await request('/sys/menu/?sourceType=APP', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {

      },
    });
    const data = handleTreeList(response?.data)
    setmenusTree(data)
    showModal();
  }


  useImperativeHandle(refs, () => ({
    init: (id: any, record: any) => {
      getMenus();

      // setfileList([]);
    },
  }));

  return (
    <Modal
      title={'选择菜单'}
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
      centered
      width={1000}
      destroyOnClose
      maskClosable={false}
      bodyStyle={{
        maxHeight: window.innerHeight - 150,
        overflowY: 'auto',
      }}
    >
      {
        menusTree && <Tree
          switcherIcon={<DownOutlined />}
          defaultExpandedKeys={['0-0-0']}
          onSelect={(selectedKeys, { node }) => {
            if (selectedKeys.length > 0) {
              setselectKey(selectedKeys)
            }
            console.log(selectedKeys)
            console.log(node);
            setnodeinfo(node)
          }}
          selectedKeys={selectKey}
          fieldNames={{ title: 'menuName', key: 'menuId' }}
          treeData={menusTree}
        />
      }
    </Modal>
  );
};
const AddMCom = forwardRef(DictModal);
export default AddMCom;
